<template>
	<view class="contant">
		<view class="vote"></view>
		<view class="vtt" style="position: relative; z-index: 9; padding-bottom: 50px">
			<view style="padding: 0px 15px">
				<view class="flex" style="justify-content: space-between">
					<view class="flex">
						<image style="width: 60px; margin-right: 10px; border-radius: 50%; height: 60px"
							:src="imgurl + com_info.userHead" mode=""></image>
						<view>
							<view style="font-size: 14px; font-weight: 400; color: #1d1f20">{{ userinfo.username }}
							</view>
							<view style="font-size: 12px; margin-top: 2px; color: #8a8988">{{ userinfo.mobile }}</view>
							<view class="flex" style="margin-top: 6px">
								<view style="font-size: 12px">邀请码：{{ userinfo.invite_code }}</view>
								<image @click="copy(userinfo.invite_code)"
									style="width: 10px;height: 10px;margin-left: 10px;" src="/static/font/8.png"
									mode=""></image>
								<!-- <view style="font-size: 12px; color: #ff3331; margin-left: 10px" >
									复制
								</view> -->
							</view>
						</view>
					</view>
					<view @click="message" style="position: relative">
						<image style="width: 21px" src="/static/font/12.png" mode="widthFix"></image>
						<!-- <u-icon name="bell" size="26"></u-icon> -->
						<text v-if="index_info.allmark > 0" style="
								display: block;
								position: absolute;
								right: -5px;
								top: -5px;
								background: #f00;
								border-radius: 50%;
								font-size: 10px;
								font-weight: 400;
								color: #ffffff;
								width: 13px;
								height: 13px;
								text-align: center;
								line-height: 13px;
							">
							{{ index_info.allmark }}
						</text>
						<!-- <u-badge style="position: absolute;right: -10px;top: -10px;" bgColor='#f00' :type="type"
							max="999999" :value="index_info.allmark"></u-badge> -->
					</view>
				</view>
				<view class="card-wrap" style="
						margin-top: 28px;
						
						box-shadow: 0px 3px 6px 1px rgba(108, 112, 136, 0.16);
						border-radius: 10px;
						overflow: hidden;
					">
					<view class="card" style="box-sizing: border-box; height: 167px; padding: 18px 15px 0">
						<view class="flex" style="justify-content: space-between">
							<view>
								<view style="height: 20px; line-height: 20px; font-size: 14px; opacity: 0.8">账户余额：
								</view>
								<view
									style="height: 33px; line-height: 33px; font-size: 24px; margin-top: 5px; font-weight: bold">
									￥{{ Number(userinfo.money) }}
								</view>
							</view>
							<view @click="now_withdrawal" style="
									width: 86px;
									height: 30px;
									line-height: 30px;
									text-align: center;
									font-size: 14px;
									background-color: #fff;
									border-radius: 15px;
									color: #5568ED;
								">
								立即提现
							</view>
						</view>
						<!-- 	<view class=""
							style="height: 1px; margin: 14px 0; opacity: 1; background: rgba(242, 166, 162, 1)"></view> -->
						<view class="flex" style="justify-content: space-between;margin-top: 28px;" v-if="userinfo">
							<view style="text-align: center; font-weight: 400">
								<view style="font-size: 16px">￥{{ userinfo.beforeSettlement }}</view>
								<view style="margin-top: 8px; font-size: 12px; font-weight: 400; opacity: 0.9">待结算
								</view>
							</view>
							<view style="text-align: center; font-weight: 400">
								<view style="font-size: 16px">￥{{ userinfo.settlement.toFixed(2) }}</view>
								<view style="margin-top: 8px; font-size: 12px; font-weight: 400; opacity: 0.9">提现中
								</view>
							</view>
							<view style="text-align: center">
								<view style="font-size: 16px; font-weight: 400">￥{{ userinfo.settled.toFixed(2) }}
								</view>
								<view style="margin-top: 8px; font-size: 12px; font-weight: 400; opacity: 0.9">已提现
								</view>
							</view>
							<view style="text-align: center">
								<view style="font-size: 16px; font-weight: 400">￥{{ userinfo.sum_income }}</view>
								<view style="margin-top: 8px; font-size: 12px; font-weight: 400; opacity: 0.9">累计收入
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="flex" style="box-sizing: border-box;  padding:15px; justify-content: space-between;margin-top: 15px;
					background-color: #ffffff;border-radius: 10px;">
					<view @click="fund" class="flex"
						style="font-size: 14px; color: #7a7c7c; color: rgba(29, 31, 32, 1); opacity: 0.7;flex-direction: column;">
						<image style="width: 26px;height: 29px;margin-bottom: 9px;" src="/static/font/25.png" mode=""></image>
						资金明细
					</view>
					<view @click="account" class="flex"
						style="font-size: 14px; color: #7a7c7c; color: rgba(29, 31, 32, 1); opacity: 0.7;flex-direction: column;">
						<image style="width: 26px;height: 29px;margin-bottom: 9px;" src="/static/font/26.png" mode=""></image>
						提现账户
					</view>
					<view @click="records" class="flex"
						style="font-size: 14px; color: #7a7c7c; color: rgba(29, 31, 32, 1); opacity: 0.7;flex-direction: column;">
						<image style="width: 26px;height: 29px;margin-bottom: 9px;" src="/static/font/24.png" mode=""></image>
						提现记录
					</view>
				</view>
				<view v-for="(it, i) in item_arr" :key="i" class="" style="margin-top: 15px;">
					<!-- <view style="font-size: 16px; font-weight: bold; color: #1d1f20">{{ it.name }}</view> -->
					<view class="flex"
						style="flex-wrap: wrap;background-color: #ffffff;flex-direction: column;align-items: flex-start;padding: 0 15px;border-radius: 10px;">
						<view class="items" @click="btn(item.id)" v-for="(item, index) in it.arrs" :key="index"
							style="padding: 20px 0; text-align: center;border-bottom: 1px solid #ececec;justify-content: space-between;">
							<view class="flex">
								<image style="width: 20px" :src="item.img" mode="widthFix"></image>
								<view style="font-size: 12px; font-weight: 400; color: #040e21;padding-left: 15px;">
									{{ item.name }}</view>
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<!-- <view style="position: fixed;bottom: 7%;left: 50%;transform: translateX(-50%);z-index: -1;">
				<image style="width: 73px;" :src="imgurl + com_info.logo" mode="widthFix"></image>
			</view> -->
		</view>
		<!-- <u-modal :show="zj_show" title="提示" :content='content' style="text-align: center;" @close="zj_show = false" @confirm="zj_conform" :close-on-click-overlay="true"></u-modal> -->
		<u-modal @close="show_a = false" :closeOnClickOverlay="true" confirmColor="#fff" confirmText="联系客服"
			confirmButtonShape="circle" :show="show_a" :title="title" :content="contents">
			<view slot="confirmButton" @click="tab_kefu">
				<u-button shape="circle" type="primary" text="联系客服"></u-button>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import config from '@/common/config/index.js';
	export default {
		data() {
			return {
				title: '提示',
				contents: `不好意思!您当前已超出规定邀请层级，不能直接邀请下级，请联系客服或成为合伙人即可邀请下级赚钱`,
				show_a: false,
				zj_show: false,
				content: '',
				com_info: '',
				imgurl: config.imgurl,
				userinfo: '',
				type: 'primary',
				value: 51,
				item_arr: [{
						name: '常用功能',
						arrs: [{
								name: '邀请团队',
								img: '/static/font/13.png',
								id: 1,
							},
							// {
							// 	name: '团队管理',
							// 	img: '/static/img/35.png',
							// 	id: 2,
							// },
							{
								name: '设置抽佣',
								img: '/static/font/7.png',
								id: 3,
							},
							// {
							// 	name: '联系上级',
							// 	img: '/static/img/37.png',
							// 	id: 4,
							// },
							// {
							// 	name: '联系客服',
							// 	img: '/static/img/38.png',
							// 	id: 5,
							// },
							{
								name: '帮助与反馈',
								img: '/static/font/14.png',
								id: 6,
							},
						],
					},
					{
						name: '平台功能',
						arrs: [{
								name: '我的信息',
								img: '/static/font/10.png',
								id: 7,
							},
							{
								name: '下载APP',
								img: '/static/font/11.png',
								id: 8,
							},
							{
								name: '关注公众号',
								img: '/static/font/9.png',
								id: 9,
							},
							// {
							// 	name: '退出登录',
							// 	img: '/static/img/44.png',
							// 	id: 10,
							// },
						],
					},
				],
				index_info: '',
				types: 0,
			};
		},
		onLoad() {
			this.common();
		},
		onShow() {
			this.index_show();
			this.my_msg();
		},
		methods: {
			tab_kefu() {
				// #ifdef H5
				window.location.href = this.com_info.wxCustomerService;
				// #endif
				// #ifdef APP
				plus.runtime.openURL(this.com_info.wxCustomerService);
				// #endif
			},
			async index_show() {
				let res = await this.$http.index.indexShow();
				if (res.code == 1) {
					this.index_info = res.data;
				}
			},
			async common() {
				let res = await this.$http.index.index();
				if (res.code == 1) {
					this.com_info = res.data;
				}
			},
			copy(e) {
				uni.setClipboardData({
					data: e,
					success() {
						uni.showToast({
							icon: 'none',
							title: '复制成功',
						});
					},
				});
			},
			async my_msg() {
				let res = await this.$http.index.my_index({});
				if (res.code == 1) {
					this.userinfo = res.data.userinfo;
				}
			},
			message() {
				uni.navigateTo({
					url: '/pages/home/my_project?type=0',
				});
			},
			//立即提现
			now_withdrawal() {
				uni.navigateTo({
					url: '/pages/me/now_withdrawal',
				});
			},
			//提现记录
			records() {
				uni.navigateTo({
					url: '/pages/me/records',
				});
			},
			//资金明细
			fund() {
				// let user = this.userinfo
				// if (user.authentication == '0') {
				// 	this.content = '请先实名认证'
				// 	this.types = 1
				// 	this.zj_show = true
				// 	// this.$tips('请先实名认证')
				// 	// setTimeout(() => {
				// 	// 	uni.navigateTo({
				// 	// 		url: '/pages/me/real_name'
				// 	// 	})
				// 	// }, 800)
				// 	// return
				// } else if (user.alipay_account == '') {
				// 	this.content = '请先绑定支付宝账号'
				// 	this.types = 2
				// 	this.zj_show = true
				// 	// this.$tips('请先绑定账号')
				// 	// setTimeout(() => {
				// 	// 	uni.navigateTo({
				// 	// 		url: '/pages/me/account'
				// 	// 	})
				// 	// }, 800)
				// 	// return
				// } else if (user.bank_card == '') {
				// 	this.content = '请先绑定银行卡'
				// 	this.types = 3
				// 	this.zj_show = true
				// 	// this.$tips('请先绑定银行卡')
				// 	// setTimeout(() => {
				// 	// 	uni.navigateTo({
				// 	// 		url: '/pages/me/bank?ali_code=' + encodeURIComponent(JSON.stringify(user
				// 	// 			.alipay_account)) + '&ali_name=' + encodeURIComponent(JSON.stringify(
				// 	// 			user.alipay_realname))
				// 	// 	})
				// 	// }, 800)
				// 	// return
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/me/fund'
				// 	})
				// }
				uni.navigateTo({
					url: '/pages/me/fund',
				});
			},
			//提现账户
			account() {
				let user = this.userinfo;
				if (user.authentication == '0') {
					this.$tips('请先实名认证');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/me/real_name',
						});
					}, 800);
					return;
				} else if (user.alipay_account == '') {
					this.$tips('请先绑定账号');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/me/account',
						});
					}, 800);
					return;
				} else if (user.bank_card == '') {
					this.$tips('请先绑定银行卡');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/me/bank?ali_code=' +
								encodeURIComponent(JSON.stringify(user.alipay_account)) +
								'&ali_name=' +
								encodeURIComponent(JSON.stringify(user.alipay_realname)),
						});
					}, 800);
					return;
				} else {
					uni.navigateTo({
						url: '/pages/me/withdrawal',
					});
				}
			},
			async teamIndex() {
				let res = await this.$http.car.teamIndex({});
				if (res.code == 1) {
					uni.navigateTo({
						url: '/pages/team/setting',
					});
				} else if (res.code == 201) {
					this.show_a = true;
				} else {
					this.$tips(res.msg);
				}
			},
			async btn(i) {
				switch (i) {
					case 1:
						uni.switchTab({
							url: '/pages/index/team',
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/team/under',
						});
						break;
					case 3:
						this.teamIndex();

						break;
					case 4:
						uni.navigateTo({
							url: '/pages/me/call',
						});
						break;
					case 5:
						// #ifdef H5
						location.href = this.com_info.wxCustomerService;
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.openURL(this.com_info.wxCustomerService);
						// #endif
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/me/help',
						});
						break;
					case 7:
						uni.navigateTo({
							url: '/pages/me/information',
						});
						break;
					case 8:
						// #ifdef H5
						location.href = this.com_info.applink;
						// #endif
						// #ifdef APP-PLUS
						plus.runtime.openURL(this.com_info.applink);
						// #endif
						break;
					case 9:
						uni.navigateTo({
							url: '/pages/home/follow',
						});
						break;
					case 10:
						await this.$http.index.logout({});
						uni.navigateTo({
							url: '/pages/login/login',
						});
						break;
				}
			},
		},
	};
</script>
<style>
	/* page {
		background-color: #F7F9FA;
	} */
</style>

<style scoped lang="scss">
	.items:last-child {
		border-bottom: none !important;
	}

	.items {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.contant {
		.vote {
			background-image: url('@/static/img/6.png');
			background-size: 100%;
			background-repeat: no-repeat;
			width: 100%;
			position: fixed;
			height: 100%;
		}

		.card {
			background: linear-gradient(220.77deg, rgba(237, 57, 47, 0.6) 0%, rgba(232, 49, 39, 1) 100%);
			// background-image: url('@/static/img/33.png');
			background-image: url('@/static/font/6.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			color: #fff;
		}
	}

	/deep/ .u-button--primary {
		background-color: #ff3331;
		border-color: #ff3331;
	}

	/deep/ .u-button--square {
		border-radius: 10px !important;
	}

	/* #ifdef APP */
	.vtt {
		padding-top: 74px;
	}

	/* #endif */
	/* #ifdef H5 */
	.vtt {
		padding-top: 24px;
	}

	/* #endif */
</style>